<template>
  <div>
    <ve-radar
      :data="chart.data"
      :settings="chart.settings"
      :extend="chart.extend"
      :legend-visible="!ignoreEachUser"
    ></ve-radar>
    <!-- <el-checkbox v-model="ignoreEachUser" @change="fetchData">仅显示合计数值</el-checkbox> -->
  </div>
</template>

<script>
export default {
  props: ["client", "range"],
  watch: {
    client() {
      // this.chart = JSON.parse(this.chartBackup);
      this.fetchData();
    },
  },
  computed: {
    inspect() {
      return this.$store.state.summary.inspectSource;
    },
    categories() {
      let items = this.$store.state.inspectData.inspectItems;
      let categories = [];
      for (let i = 0; i < items.length; i++) {
        if (categories.indexOf(items[i].category) < 0) {
          categories.push(items[i].category);
        }
      }
      return categories;
    },
  },
  data() {
    return {
      ignoreEachUser: true,
      // chartBackup: "",
      chart: {
        extend: {
          radar: {
            indicator: [],
            shape: "polygon" /* circle polygon */,
          },
          // legend: {
          //   bottom: 0,
          //   padding: [12, 0, 0, 0],
          //   orient: "horizontal",
          // },
        },
        settings: {
          // dimension: ["日期"],
          // metrics: [],
          areaStyle: {
            opacity: 0.2,
          },
        },
        data: {
          // indicator: [],
          columns: [],
          rows: [],
        },
      },
    };
  },
  methods: {
    fetchData() {
      let rows = [];
      let row_total = { 日期: "全部" };
      this.chart.data.columns = JSON.parse(JSON.stringify(this.categories));
      this.chart.data.columns.splice(0, 0, "日期");
      // this.chart.settings.metrics = this.categories;
      let indicator = [];
      for (let i = 0; i < this.categories.length; i++) {
        indicator.push({ name: this.categories[i], max: 5 });
      }
      this.chart.extend.radar.indicator = indicator;
      for (let recIdx = 0; recIdx < this.inspect.length; recIdx++) {
        let rec = this.inspect[recIdx];
        if (rec.clientName === this.client) {
          let begin = new Date(rec.begin.replace(/-/g, "/"));
          let time = new Date(rec.time.replace(/-/g, "/"));
          if (
            time.getTime() >= this.range.min.getTime() ||
            begin.getTime() <= this.range.max.getTime()
          ) {
            //Matched Data
            if (!this.ignoreEachUser) {
              let user = this.inspect[recIdx].userName;
              let title = user + "@" + time.toLocaleDateString();
              if (
                rows.length === 0 ||
                rows[rows.length - 1]["日期"] !== title
              ) {
                /* this.inspect[recIdx].userName */
                rows.push({ 日期: title });
              }
            }
            //count for each day
            for (let catID = 0; catID < this.categories.length; catID++) {
              let cat = this.categories[catID];
              if (cat === rec.category) {
                //each day
                if (!this.ignoreEachUser) {
                  if (!rows[rows.length - 1][cat]) {
                    rows[rows.length - 1][cat] = {
                      value: +rec.value,
                      count: 1,
                    };
                  } else {
                    rows[rows.length - 1][cat].value += +rec.value;
                    rows[rows.length - 1][cat].count++;
                  }
                }
                //total
                if (!row_total[cat]) {
                  row_total[cat] = { value: +rec.value, count: 1 };
                } else {
                  row_total[cat].value += +rec.value;
                  row_total[cat].count++;
                }
              }
            }
          }
        }
      }
      rows.splice(0, 0, row_total);
      //get averange value
      rows.forEach(function(row) {
        Object.keys(row).forEach(function(key) {
          if (key != "日期") {
            row[key] = +(row[key].value / row[key].count).toFixed(2);
          }
        });
      });
      //export
      this.chart.data.rows = rows;
    },
  },
  created() {
    // this.chartBackup = JSON.stringify(this.chart);
    this.fetchData();
  },
};
</script>
